/** @jsxImportSource @emotion/react */
import * as React from "react";
import {Text, BlobInputList, CCell, Table, TableHead, TableRow, TableBody,} from "customize-easy-ui-component";
import {InspectRecordLayout, InternalItemProps, RepLink, useItemInputControl,} from "../../common/base";
import {useMeasureInpFilter} from "../../common/hooks";
import {objNestSet} from "../../../common/tool";
import {useOmnipotentPref, useOmnipotentPrefTitle} from "../../hook/useOmnipotentPref";
import {css} from "@emotion/react";
import {MemoDateInput} from "../../../comp/base";

const items监控设施 = [
    ['视频监', [{t:'视频监控设施',s: 1},{t:'( 1 )',}], '公众聚集场所的电梯和住宅小区的电梯，应当配备符合有关规定和标准的视频监控设施。', undefined],
    ['远程监', [{t:'远程监测装置', s: 1},{t:'( 1 )',s: 1},], '新安装的乘客电梯应当配备能够实现远程监测功能的装置，并提供标准数据接口。', ],
    ['降温措', [{t:'机房通风降温措施',},{t:'( 1 )',s: 1}], '采取在机房安装空调等通风降温措施，保证电梯机房内温度符合相关标准要求。' ],
];

const tailText=<Text css={{display: 'grid',fontSize: '0.8rem'}}>
    备注：1.检查依据:《福建省电梯安全管理条例》；
    <Text css={{textIndent: '2.4rem',fontSize: '0.8rem'}}>2.本附录所列项目检查结果不作为整机结论判定依据。</Text>
</Text>;
export const itemA监控设施: string[] = [ ];
items监控设施.forEach(([name, title, initIsp], i: number) => {
    itemA监控设施.push(name as string);
});
interface Props extends InternalItemProps {
    config?: any[];
    label: any;
}
export const MonitoringFacili =
    React.forwardRef((
        {children, show, alone = true, refWidth, label, config=items监控设施}: Props, ref
    ) => {
        const {inp, setInp} = useItemInputControl({ref});
        const [getInpFilter] = useMeasureInpFilter(null, itemA监控设施,);
        const titNode=useOmnipotentPrefTitle({config, });
        return (
            <InspectRecordLayout inp={inp} setInp={setInp} getInpFilter={getInpFilter} show={show}
                                 alone={alone} label={label!}>
                <Text variant="h5">{label}：</Text>
                {config.map(([name, _1, _2, unit]: any, i: number) => {
                    return (<React.Fragment key={i}>
                        <div css={{display: 'flex', flexWrap: 'wrap', alignItems: 'center'}}>
                            {titNode[i]}&nbsp;
                            <div css={{display: 'inline-flex', alignItems: 'center', flexWrap: 'wrap'}}>
                                检验结果：
                                <BlobInputList value={inp?.[name]?.r || ''} datalist={['√', '／', '×']} rows={1}
                                               style={{display: 'inline-flex', width: '6rem', maxWidth: '100%', fontSize: '1.1rem',}}
                                               listStyle={css({fontSize: '1.4rem',})}
                                               onListChange={v => objNestSet(name, 'r', v || undefined, inp, setInp)}/>
                            </div>
                            <div css={{display: 'inline-flex', alignItems: 'center', flexWrap: 'wrap'}}>
                                存在问题描述：
                                <BlobInputList value={inp?.[name]?.P || ''} datalist={[]} rows={1}
                                               style={{display: 'inline-flex', width: '16rem', maxWidth: '100%',}}
                                               onListChange={v => objNestSet(name, 'P', v || undefined, inp, setInp)}/>
                            </div>
                            <div css={{display: 'inline-flex', alignItems: 'center', flexWrap: 'wrap'}}>
                                确认日期
                                <MemoDateInput value={inp?.[name]?.d || ''}
                                               onChange={v => objNestSet(name,'d', v||undefined,inp,setInp) } />
                            </div>
                        </div>
                    </React.Fragment>);
                })}
                {children ? children :
                    <>{tailText}</>
                }
            </InspectRecordLayout>
        );
});

const tailRender=(orc: any, name: string)=><>
    <CCell><Text css={{fontSize: '1.05rem'}}>{orc?.[name]?.r??'／'}</Text></CCell>
    <CCell>{orc?.[name]?.P??'／'}</CCell>
    <CCell>{orc?.[name]?.d??'／'}</CCell>
</>;
export const MonitoringFaciliVw= ({orc, rep,label,config=items监控设施,children}
                                      :{orc:any, rep:any,label:any,config?:any[],children?: React.ReactNode}
) => {
    const [renders]=useOmnipotentPref({orc, config, tailRender,pcols:2,});
    return <>
        <div css={{"@media print": {paddingBottom: '6rem', pageBreakInside: 'avoid'}}}>
            <Text variant="h4" css={{marginTop: '1rem',}}>{label}</Text>
        </div>
        <Table id='MonitoringFacili' fixed={ ["4%", "14%", "5%", "%", "8%", "22%", "8%"] }
               css={ {borderCollapse: 'collapse', "@media print": {marginTop: '-6rem'}} }  tight  miniw={800}>
            <TableHead>
                <TableRow>
                    <CCell><Text css={{fontSize:'0.75rem'}}>序号</Text></CCell><CCell>项目名称</CCell><CCell colSpan={2}>检验内容与要求</CCell>
                    <CCell><Text css={{fontSize:'0.8rem'}}>检验结果</Text></CCell><CCell>存在问题描述</CCell><CCell>确认时间</CCell>
                </TableRow>
            </TableHead>
            <TableBody>
                <RepLink ori rep={rep} tag={'MonitoringFacili'}>
                    {renders}
                </RepLink>
            </TableBody>
        </Table>
        {children ? children :
            <>{tailText}</>
        }
    </>;
};
